<template>
	<div>
		<div class="hall">
			<div class="header">
				<h3>大厅
				<span></span>
				</h3>
				<h4>关注</h4>
				<router-link to="/layout/sending">
					<img src="../assets/smallIcon/pull-down.png"  alt="">
				</router-link>
			</div>
			<div class="nav">
				<div class="nav_info">
					<img src="../assets/personIcon/Head portrait_FX01.png" height="80" width="80" alt="">
				    <button>+关注</button>
				    <h3>远航</h3>
				    <p class="nav_f">56分钟前 来自 路上 lushang.com</p>
				    <p>人生就是一次充满未知的旅行，在乎的是沿途的风景，在乎的是看风景的心情，旅游不会因为美丽的风景终止。走过的路成为背后的风景，不能回头不能停留，若此刻停留，将会错过更好的风景，保持一份和平，保持一份清醒。享受...</p>
				    <hr>
				</div>
				
                 <div class="btn">
                 	<img src="../assets/smallIcon/share.png" height="33" width="31" alt="">
                 	<span>1万</span>
                 	<img class ="btn_f"src="../assets/smallIcon/infromation.png" height="32" width="32" alt="">
                 	<span>4754</span>
                 	<img class="btn_n"src="../assets/smallIcon/Fabulous.png" height="40" width="40" alt="">
                 	<span>5万</span>
                 </div>
			</div>
            <div class="medium">
            	<div class="medium_info">
            		<img src="../assets/personIcon/wozanguode_02.png" height="80" width="80" alt="">
				    <h3>不二摩斯</h3>
				    <p>5小时前 来自 路上 lushang.com</p>
				 <div class="medium_f">
					<h5>哈哈哈，西安三日游，真的很开心！</h5>
					<img src="../assets/landscape/wozanguode_01.png" height="230" width="230" alt="">
                    <img src="../assets/landscape/wozanguode_02.png" height="230" width="230" alt="">
                    <img src="../assets/landscape/wozanguode_03.png" height="230" width="230" alt="">
                    <hr>
				</div>
            	</div>
			
                 <div class="btn">
                 	<img src="../assets/smallIcon/share.png" height="33" width="31" alt="">
                 	<span>1万</span>
                 	<img class ="btn_f"src="../assets/smallIcon/infromation.png" height="32" width="32" alt="">
                 	<span>4754</span>
                 	<img class="btn_n"src="../assets/smallIcon/Fabulous.png" height="40" width="40" alt="">
                 	<span>5万</span>
                 </div>
			</div>
            <div class="lower">
                <div class="lower_info">
                	<img src="../assets/personIcon/Head portrait_FX03.png" height="80" width="80" alt="">
				    <button>+关注</button>
				    <h3>衣袂票</h3>
				    <p class="nav_f">8小时前 来自 路上 lushang.com</p>
				    <div class="centen">
					    <h5>走在宁静的道路上...</h5>
					    <img src="../assets/landscape/picture_CS03.png" height="280" width="710" alt="">
					    <hr>
				    </div>
                </div>
				
				
			
                 <div class="btn">
                 	<img src="../assets/smallIcon/share.png" height="33" width="31" alt="">
                 	<span>1万</span>
                 	<img class ="btn_f"src="../assets/smallIcon/infromation.png" height="32" width="32" alt="">
                 	<span>4754</span>
                 	<img class="btn_n"src="../assets/smallIcon/Fabulous.png" height="40" width="40" alt="">
                 	<span>5万</span>
                 </div>
			</div>
             <div class="shi"></div>
		</div>
		<FooterNav />
	</div>
</template>

<script>

import FooterNav from "../components/footerNav"

export default{
	name:"faxian",
	data(){
		return{

		}
	},
	components:{
		FooterNav
	}
}	

</script>
<style scoped lang="less">
*{
	margin: 0;
	padding: 0;
}
.header{
	width: 100%;
	height: 94 / 50rem;
	background-color: #7dd19d;   
	overflow: hidden; 
	position:fixed;
	top:0;
	left: 0;
	right: 0;	
	h3{
		display: inline-block;
		font-size: 36 / 50rem;
		color:#2993fe;
		margin-left: 151 / 50rem;
		line-height: 94 / 50rem;
		position: relative;
		span{
			display: block;
			width: 95 /50rem;
			height: 5 /50rem;
			background-color: #2993fe;
			position: absolute;
			bottom: 10 /50rem;
			right: -12/50rem
		}
	}
	h4{
		display: inline-block;
		font-size: 35 / 50rem;
		margin-left: 243 / 50rem;
		color: #444;
    }
    img{
    	width: 40 / 50rem;
    	height: 22 / 50rem;
    	position: absolute;
    	right: 20 /50rem;
    	top:39/50rem;
    }
}
.nav{
	height: 332 / 50rem;
	background-color: #fff;
	margin-top: 114 / 50rem;
	.nav_info{
		width: 710 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
	}

	img{
		display: inline-block;
		width: 80 / 50rem;
		height: 80 / 50rem;
		margin-top: 20 / 50rem;
	}
	h3{
        margin-left: 100 / 50rem;
        margin-top: -75 / 50rem;
		font-size: 24 / 50rem;
	}
	.nav_f{
		font-size: 18 / 50rem;
		margin-left: 100 / 50rem;
		margin-top: 10 / 50rem;
	}
    p{
    	font-size: 26 / 50rem;
    	margin-top: 20 / 50rem;
    	line-height: 35 / 50rem;
    }
    hr{
    	margin-top: 14 / 50rem;
    	border: 1px solid #e6e6e6;
        border-top: none;
		
    }
    button{
       width: 100 / 50rem;
       height: 44 / 50rem;
       background: #fff;
       outline: none;
       color: #7dd19d;
       float: right;
       font-size: 20 / 50rem;
       border: 1px solid #7dd19d;
       margin-right: 20 / 50rem;
       margin-top: 38 / 50rem;
       border-radius: 8 / 50rem;
    }
}
.btn{
	img{
		display: inline-block;
        vertical-align: middle;
		width: 33 / 50rem;
		height: 33 / 50rem;
		margin-left: 70 / 50rem;
		margin-top: 14 / 50rem; 
	}
	.btn_f{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
		
	}
	.btn_n{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
	}
	span{
		display: inline-block;
        vertical-align: middle;
        margin-top: 14 / 50rem;  
        font-size: 20 / 50rem;
        margin-left: 10 / 50rem;
		
	}
}
.medium{
	height: 464 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.medium_info{
		width: 710 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
	}
	img{
		display: inline-block;
		width: 80 / 50rem;
		height: 80 / 50rem;
		margin-top: 14 / 50rem;
	}
	h3{
        margin-left: 100 / 50rem;
        margin-top: -75 / 50rem;
		font-size: 24 / 50rem;
	}
	p{
		font-size: 18 / 50rem;
		margin-left: 100 / 50rem;
		margin-top: 10 / 50rem;
	}
    h5{
    	font-size: 26 / 50rem;
    	margin-top: 20 / 50rem;
    	line-height: 38 / 50rem;
    }
	.medium_f img{
        width: 230 / 50rem;
        height: 230 / 50rem;
	}
	hr{
		margin-top: 14 / 50rem;
		border: 1px solid #e6e6e6;
        border-top: none;
	}
.btn{
	img{
		display: inline-block;
        vertical-align: middle;
		width: 33 / 50rem;
		height: 33 / 50rem;
		margin-left: 70 / 50rem;
		margin-top: 14 / 50rem; 
	}
	.btn_f{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
		
	}
	.btn_n{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
	}
	span{
		font-size: 20 / 50rem;
		display: inline-block;
        vertical-align: middle;
        margin-top: 14 / 50rem;  
		
	}

}

}
.lower{
	
	height: 550 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.lower_info{
		width: 710 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
	}
	img{
		display: inline-block;
		width: 80 / 50rem;
		height: 80 / 50rem;
		margin-top: 14 / 50rem;
	}
	h3{
        margin-left: 100 / 50rem;
        margin-top: -75 / 50rem;
		font-size: 24 / 50rem;
	}
	p{
		font-size: 18 / 50rem;
		margin-left: 100 / 50rem;
		margin-top: 10 / 50rem;
	}
	hr{
    	margin-top: 14 / 50rem;
    	border: 1px solid #e6e6e6;
        border-top: none;

    }
    button{
       width: 100 / 50rem;
       height: 44 / 50rem;
       background: #fff;
       outline: none;
       color: #7dd19d;
       float: right;
       font-size: 20 / 50rem;
       border: 1px solid #7dd19d;
       margin-right: 20 / 50rem;
       margin-top: 38 / 50rem;
       border-radius: 8 / 50rem;
    }
.centen{
	h5{
		font-size: 26 / 50rem;
    	margin-top: 20 / 50rem;
    	line-height: 38 / 50rem;
	}
	img{
		width: 351 / 50rem;
		height: 200 / 50rem;
	}
}
.btn{
	img{
		display: inline-block;
        vertical-align: middle;
		width: 33 / 50rem;
		height: 33 / 50rem;
		margin-left: 70 / 50rem;
		margin-top: 14 / 50rem; 
	}
	.btn_f{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
		
	}
	.btn_n{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
	}
	span{
		display: inline-block;
        vertical-align: middle;
        margin-top: 14 / 50rem; 
        font-size: 20 / 50rem; 
	}

}

}
</style>